<template>
  <div class="basic">
      <div class="flex flex-a-c flex-j-s-b">
        <div class="basic-title white">设备基本数据</div>
        <!-- <a-date-picker
          :showToday="false"
          size="small"
          format="YYYY-MM-DD"
          placeholder="请选择日期"
          v-model="timeParams.day"
          @change="dateChange"
        /> -->
      </div>
      <br />
      <a-row :gutter="24">
        <a-col :xl="10" :xxl="10">
          <div class="availability">
            <img src="@images/equipment/fileread.png" />
            <div class="avaiNum">
              <span>{{overallEquipmentEffectiveness}}%</span>
            </div>
            <div class="avaiTitle">设备综合利用率</div>
            <div class="avaiText">(OEE)</div>
          </div>
          <ul class="processCount">
            <li class="pieSend">
              <span class="name white">当日加工</span>
              <span class="value skin"
                >{{ model ? (model.total ? model.total : 0) : 0 }}件</span
              >
            </li>
            <li class="pieSend">
              <p class="name white">工件信息</p>
              <p>
                <span
                  class="value skin"
                  v-for="(item, index) in produceNameRank"
                  :key="index + 'b'"
                >
                  {{ index + 1 }}. {{ item.produceName }} {{ item.count }}件
                </span>
                <!-- <a @click="gotoyieldDetails" style="color:#269AF3">查看详情></a> -->
              </p>
            </li>
          </ul>
        </a-col>
        <a-col :xl="14" :xxl="14">
          <pieCharts
            :chartData="pieDataCharts"
            :running="running"
            :height="'304px'"
          ></pieCharts>
          <div class="pieTips">
            <div
              class="pieSend "
              v-for="(item, index) in pieData"
              :key="index + 'a'"
            >
              <span
                class="quan"
                :style="{ 'border-color': alarmStatues[index] }"
              ></span>
              <span class="name white">{{ item.name }}</span>
              <span class="value skin">{{ item.value }}</span>
            </div>
          </div>
        </a-col>
        <!-- <a-col :xl="10" :xxl="10">
          <a-row>
            <a-col :xl="12" :xxl="12">
              <div
                class="pieSend "
                v-for="(item, index) in pieData"
                :key="index + 'a'"
              >
                <span
                  class="quan"
                  :style="{ 'border-color': alarmStatues[index] }"
                ></span>
                <span class="name white">{{ item.name }}</span>
                <span class="value skin">{{ item.value }}</span>
              </div>
            </a-col>
            <a-col :xl="12" :xxl="12">
              <ul>
                <li class="pieSend">
                  <span class="name white">当日加工</span>
                  <span class="value skin"
                    >{{ model ? (model.total ? model.total : 0) : 0 }}件</span
                  >
                </li>
                <li class="pieSend">
                  <p class="name white">工件信息</p>
                  <p>
                    <span
                      class="value skin"
                      v-for="(item, index) in produceNameRank"
                      :key="index + 'b'"
                    >
                      {{ index + 1 }}. {{ item.produceName }} {{ item.count }}件
                    </span>
                    <a @click="gotoyieldDetails" style="color:#269AF3">查看详情></a>
                  </p>
                </li>
              </ul>
            </a-col>
          </a-row>
        </a-col> -->
      </a-row>
  </div>
</template>

<script>
import api from "@api/apiServer";
import moment from "moment";
import { alarmStatues } from "./config";
import pieCharts from "./pieCharts";
export default {
  name: "BasicData",
  components: { pieCharts },
  data() {
    return {
      moment,
      alarmStatues,
      timeParams: { macSN: "", day: "" },
      dateFormat: "YYYY-MM-DD",
      model: {},
      running: null,
      pieDataCharts: [],
      produceNameRank: [],
      pieData: [
        { value: "0", name: "开机" },
        { value: "0", name: "运行" },
        { value: "0", name: "待机" },
        {
          value: "0",
          name: "报警",
        },
        { value: "0", name: "离线" },
      ],
      overallEquipmentEffectiveness: 0,
    };
  },
  mounted() {
    this.timeParams.macSN = this.macSN = this.$route.query.macSn;
    this.timeParams.day = this.newDay;
    this.getStateTimeSum();
  },
  computed: {
    newDay() {
      return moment().format("YYYY-MM-DD");
    },
  },
  methods: {
    // 获取设备基本数据
    async getStateTimeSum() {
      const { data: res } = await api.getStateTimeSum(this.timeParams);
      this.model = res;
      this.pieData = [
        { value: this.model ? this.model.startUp : 0, name: "开机" },
        { value: this.model ? this.model.running : 0, name: "运行" },
        { value: this.model ? this.model.stop : 0, name: "待机" },
        { value: this.model ? this.model.alarm : 0, name: "报警" },
        { value: this.model ? this.model.offline : 0, name: "离线" },
      ];
      this.running = this.model
        ? this.model.running
          ? this.model.running
          : "0"
        : "0";
      this.pieDataCharts = res ? res.stateTimes : [];
      if (res && res.produceNameRank) {
        this.produceNameRank = res.produceNameRank;
      } else {
        this.produceNameRank = [];
      }

      // 计算设备综合利用率
      let runningTimes = this.changeTimes(this.model.running)
      let stopTimes = this.changeTimes(this.model.stop)
      let alarmTimes = this.changeTimes(this.model.alarm)
      let overNumber = runningTimes / (runningTimes + stopTimes + alarmTimes)
      if(overNumber == 1) {
        this.overallEquipmentEffectiveness = 100
      } else if (isNaN(overNumber)) {
        this.overallEquipmentEffectiveness = 0
      } else {
        this.overallEquipmentEffectiveness = (overNumber * 100).toFixed(1)
      }
    },
    // 日取选择器回调
    dateChange(data, datastring) {
      this.timeParams.day = datastring;
      this.getStateTimeSum();
    },
    // 获取单台机器当天的OEE
    async getEquOEE() {
      let params = {
        MacSN: this.timeParams.macSN,
        dayTime: this.timeParams.day
      }
      const res = await api.getEquOEE(params);
      if(res.code != 0 ) {
        return
      }
      if(res.data.overallEquipmentEffectiveness == 0) {
        this.overallEquipmentEffectiveness = 0
      } else {
        this.overallEquipmentEffectiveness = (res.data.overallEquipmentEffectiveness * 100).toFixed(1)
      }
    },
    // 时长转分钟
    changeTimes(value) {
      let hour = value.split('小时')[0]
      let minute = (value.split('小时')[1]).split('分')[0]
      let allMinute = Number(hour * 60) + Number(minute)
      return allMinute
    }
  },
};
</script>

<style scoped lang="less">
.basic {
  .basic-title {
    font-size: 16px;
    color: #000;
    font-weight: bold;
  }
  .availability {
    text-align: center;
    padding: 10px 0;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
    position: relative;
    img {
      width: 160px;
    }
    .avaiNum {
      width: 100%;
      position: absolute;
      top: 60px;
      text-align: center;
      font-size: 24px;
      color: #1991eb;
      font-weight: bolder;
    }
    .avaiTitle {
      margin-top: 5px;
    }
    .avaiTitle,.avaiText {
      color: #808a99;
    }
  }

  .processCount {
    height: 160px;
    margin-top: 20px;
    padding: 16px;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
  }
  .pieTips {
    display: flex;
    .pieSend {
      flex: 1;
      position: relative;
      .white {
        padding-left: 6px;
      }
      .skin {
        position: absolute;
        top: -25px;
        left: 0;
      }
    }
  }
  .pieSend {
    min-height: 50px;
    // overflow: hidden;
    position: relative;
    .quan {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 2px solid #fff;
      margin-right: 10px;
    }
    .name {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #000;
      line-height: 24px;
      margin-right: 20px;
      font-weight: 600;
    }

    .setBox {
      margin-left: 20px;
    }
    .value {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #1d2531;
      line-height: 32px;
    }
    p {
      float: left;
      span {
        display: block;
      }
    }
  }
}
</style>
